<script lang="ts" setup>
  import { useForm } from '@/hooks/arco/useForm';
  import { useModalBinder } from '@/hooks/arco/useModalBinder';
  import { reportRepair } from '@/api-new/devices';
  import { Message } from '@arco-design/web-vue';

  const form = useForm({
    state: {
      deviceId: '',
      repairReason: '',
    },
  });

  const binder = useModalBinder(
    (record) => {
      form.state.deviceId = record.deviceId;
      form.state.repairReason = '';
      // console.log('record', record);
      binder.setTitle('设备报损');
    },
    {
      showFooter: true,
    }
  );

  defineExpose(binder.expose);

  const onBeforeOk = (done: any) => {
    reportRepair(form.state)
      .then((res) => {
        done(true);
        Message.success('报损成功');
        binder.hideModal();
        binder.triggerSuccess(res);
      })
      .catch(() => {
        done(false);
      });
  };
</script>

<template>
  <a-modal v-bind="binder.bindProps" @before-ok="onBeforeOk">
    <div class="flex flex-col">
      <span class="text-slate-500">请填写报损原因</span>
      <a-form class="mt-2" v-bind="form.bindProps">
        <a-form-item no-style>
          <a-textarea
            v-model="form.state.repairReason"
            placeholder="请输入报损原因"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
